<template>
  <div
    class="a-switch"
    @click="handleSwitch"
    :class="[isClose ? 'a-switch-openBgColor' : 'a-switch-closeBgColor']"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :width="width"
    ref="core"
  >
    <div
      class="a-switch-ball"
      :class="[isClose ? 'a-switch-open' : 'a-switch-close']"
      ref="ball"
    ></div>
  </div>
</template>

<script>
export default {
  name: "a-switch",
  data() {
    return {
      isClose: true,
    };
  },
  props: {
    disable: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 150,
    },
    activeColor: {
      type: String,
      default: "",
    },
    inactiveColor: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleSwitch() {
      this.isClose = !this.isClose;
      console.log(this.isClose);
      this.setColor();
    },
    setColor() {
      if (this.activeColor || this.inactiveColor) {
        var color = !this.isClose ? this.activeColor : this.inactiveColor;
        this.$refs.core.style.backgroundColor = color;
        this.$refs.core.style.borderColor = color;
      }
    },
  },
  mounted() {
    this.setColor();
  },
};
</script>

<style lang="scss" scoped>
@import "./a-switch.scss";
</style>
